<template>
	<div class="content">
	    <div class="cloud-header">
	      <h2 class="r-title-h2">轮播图回收站
	      </h2>
	    </div>
<!-- 	    <div class="cloud-body">
			<Screen :list="search_config" :data="search_data"  @submit="onSearch"></Screen>
	    </div> -->
	    <div class="cloud-body">
	    	<div class="r-table">
		    	<div class="r-table-head">
		    		<div class="r-table-title"><i class="iconfont icon-menu1"></i>轮播图回收站列表</div>
		    	</div>
		    	
			   <Table :datas="datas" class="r-table-main" @select="onselect" :checkbox="checkbox" :stripe="stripe" :loading="loading" selectWhenClickTr>
			      <TableItem title="" prop="$serial" v-if="serial"></TableItem>
			      <TableItem title="轮播图名称" prop="title" :width="200"></TableItem>
			      <TableItem align="center" title="缩略图" :width="120">
		      	  	<div slot-scope="{data}" class="r-table-img">
	                	<img :src="data.image">
	              	</div>
			      </TableItem>
			      <TableItem title="状态">
			      	<div slot-scope="{data}">
			      		{{data.status == 1 ? '显示' : '隐藏'}}
			      	</div>
			      </TableItem>
			      <TableItem title="链接" :width="220">
			      	<div  slot-scope='{data}' class="r-adv-url">
			      		{{data.url}}
			      	</div>
			      </TableItem>
			      <TableItem title="排序号" align="center" prop="sort"></TableItem>
			      <TableItem title="添加时间" prop="creation_time" :width="180"></TableItem>
			      <TableItem title="操作" align="center" :width="160">
			      		<template slot-scope="{data}">
			      			<div class="r-item-action">
				      			<div @click="intRestore(datas, data)" class="r-action-button">恢复</div>
				      			<div @click="intDelete(datas, data)" class="r-action-button">彻底删除</div>
			      			</div>
			      		</template>
			      </TableItem>
			      <div slot="empty">还没有添加轮播图哦！</div>
			    </Table>
			    <div class="r-table-footer">
			    	<div><button  @click="intDelete(datas, batch_val)" class="h-btn h-btn-no-border h-btn-text-blue">批量彻底删除</button></div>
			    </div>
			</div>
	    </div>
	</div>
</template>
<script type="text/javascript">
	//搜索组件
	import Screen from '@/components/screen'
	export default {

		name:"",
		data(){
			return {
				datatable_name:'banner',
				batch_val:[],

	            /**
	             * 搜索数据
	             * @type {[type]}
	             */
	            // search_config: [
	            //     {
	            //         type: 'input',
	            //         label: '输入搜索',
	            //         name: '_userid',
	            //         placeholder: '输入轮播图标题'
	            //     },
	            //     {
             //            type:'date',
             //            min_name:'startDate',
             //            max_name:'endDate',
             //            label:'上传时间',
             //            format:'YYYY-MM-DD',
             //            model:'range',               			//模式
             //        }
	            // ],
	            // search_data: {
	            //     _userid: '',
	            //     startDate:'',
	            //     endDate:'',
	            // },

	            // 表格
				  show: false,
			      border: false,
			      stripe: false,
			      checkbox: true,
			      serial: false,
			      loading: true,
			      datas: [],
			}
		},
	    components: {
	       Screen
	    },
	    mounted(){
	    	this.getList();
	    },
		methods:{
			/**
			 * 获取轮播广告
			 */
			async getList(){
				this.loading = true;
				let ret = await this.$cloud.name(this.datatable_name).where({deleted:0}).select();
				if(ret || ret.length == 0){
					this.datas = ret;
					this.loading = false;
				}else{
					this.$Message.error('网络异常，请稍后重试！')
					this.loading = false;
				}
			},

			
		    onselect(data) {
		    	this.batch_val = data;
		    },

		    /**
		     * 恢复回收站中的商品
		     * @param  {[type]} datas [description]
		     * @param  {[type]} data  [description]
		     * @return {[type]}       [description]
		     */
		   	async intRestore(datas,data){
		      let _id = [];
		      if(Object.prototype.toString.call(data) == '[object Array]'){
		        for(let key in data){
		          _id.push(data[key]['_id'])
		        }
		      }else{
		        _id.push(data._id);
		      }

		      //恢复商品
		      let ret = this.$cloud.name(this.datatable_name).where({_id:['in',_id]}).update({deleted:1});
		      if(ret){
		        //重新获取数据
		        await this.getList();
		        this.$Message.success('恢复轮播图成功！');
		      }else{
		        this.$Message.error('网络异常，请稍后重试！')
		      }
		   	},


		   	/**
		   	 * 测底删除
		   	 * @param  {[type]} datas [description]
		   	 * @param  {[type]} data  [description]
		   	 * @return {[type]}       [description]
		   	 */
	    	intDelete(datas, data) {
				if(data.length == 0){
		         	this.$Message.error('请选中要删除的轮播图！')
		         	return false;
		      	}
			    this.$Confirm('您确定删除轮播图吗？彻底删除之后将不可恢复，请谨慎操作！', '删除轮播图！').then(async () => {
			      	let _id = [];
			      	if(Object.prototype.toString.call(data) == '[object Array]'){
			        	for(let key in data){
			         		_id.push(data[key]['_id'])
			        	}
			      	}else{
			        	_id.push(data._id);
			      	}

			      	let ret = this.$cloud.name(this.datatable_name).where({_id:['in',_id]}).delete();
			      	if(ret){
			      		//重新获取数据
			        	await this.getList();
			      		this.$Message.success('删除轮播图成功！');
			      	}else{
						this.$Message.error('网络异常，请稍后重试！')
			     	}
			    }).catch(() => {
			        this.$Message.error('取消');
			    });

	    		console.log('加入回收站',data)
	        },
		}
	}
</script>
<style type="text/css" lang="less">
	.cloud-header{
		margin-bottom: 20px;
	}
	.r-title-h2{
		border-left: solid 5px #2d7bf4;
		padding-left: 10px;
		margin-bottom: 0px !important;
	}
.r-table{
		.r-table-head{
			border-bottom: solid 1px #efefef;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-bottom: 20px;
			.r-table-title{
				color: #999;
				i{
					margin-right: 10px;
				}
			}
			.r-table-button{
				button{
					margin-left: 15px;
				}
				i{
					margin-right: 5px;
				}
			}
		}
		.r-table-main{
			border: none;
			th{
				background-color: #fff;	
			}
		}
		.r-adv-url{
			white-space:nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			-o-text-overflow:ellipsis;
		}
	    .r-table-img{
	      width: 80px;
	      height: 80px;
	      border:solid 1px #efefef;
		  margin: 0 auto !important;
	      display: flex;
	      justify-content: center;
	      align-items: center;
	      img{
	        width: auto; 
	        height: auto;
	        max-width: 100%;
	        max-height: 100%;
	      }
	    }
		.r-item-action{
			display: flex; 
			align-items: center; 
			justify-content: center;
			.r-action-button{
				margin: 0px 5px;
				color: #3788ee;
				cursor: pointer;
			}
			.r-action-button:active{
				color: #2677dd;
			}
		}
		.r-table-footer{
			display: flex;
			justify-content: space-between;
			align-items: center;
			align-items: center;
			padding-top: 20px;
			margin-top: 20px;
			border-top: 1px solid #eeeeee;
		}
	}

</style>
